<script lang="ts">
    import { fly, slide } from "svelte/transition";
    import { Badge } from "../Badge";
    import { Tooltip } from "../Tooltip";
    import { useClassList } from "../utils/useClassList";
    import type { FloatButtonProps } from "./FloatButton";
    import { useFloatButtonGroupContext } from "./FloatButtonGroup.svelte";

    const props: FloatButtonProps = $props();
    const ctx: any = useFloatButtonGroupContext();
    const shape = ctx?.shape ?? props.shape ?? "circle";
    const type = props.type ?? "default";
    const classList = $derived(
        useClassList(props, "cm-float-btn", {
            [`cm-float-btn-${shape}`]: shape,
            [`cm-float-btn-${type}`]: type,
        })
    );
</script>

{#snippet content()}
    <Badge {...props.badge}>
        <div class="cm-float-btn-body">
            <div class="cm-float-btn-content">
                {#if props.icon}
                    <div class="cm-float-btn-icon">{@render props.icon()}</div>
                {/if}
                {#if props.description}
                    <div class="cm-float-btn-description">
                        {#if typeof props.description === "function"}
                            {@render props.description()}
                        {:else}
                            {props.description}
                        {/if}
                    </div>
                {/if}
            </div>
        </div>
    </Badge>
{/snippet}

<button in:fly={{ y: 48 }} out:fly={{ y: 48 }} class={classList} onclick={props.onclick} style={props.style}>
    {#if props.tooltip}
        <Tooltip content={props.tooltip} align="left">
            {@render content()}
        </Tooltip>
    {:else}
        {@render content()}
    {/if}
</button>
